<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>

	<body>
		<style>
			.widget {
				text-align: center;
				color: #66CCFF;
			}
		</style>
		<p>:host 的选择器的优先级被设定为低于页面选择器的优先级，所以如果有需要的话它可以轻松的被页面重写样式。</p>
		<div class="widget">
			<p>Hello World!</p>
		</div>

		<script>
			var host = document.querySelector('.widget');
			var root = host.createShadowRoot();
			root.innerHTML = '<style>' +
				':host {' +
				'  border: 2px dashed red;' +
				'  text-align: left;' +
				'  font-size: 28px;' +
				'} ' +
				'</style>' +
				'<content></content>';
		</script>
	</body>

</html>